//out:../css/
@import './base.less';

@vw:3.75vw;
@colorr:#ff6699;
header{
    width: (351/@vw);
    height: (84/@vw);
    background-color:#fff;
    position: fixed;
    top: 0;
    margin: 0 (13/@vw);
    z-index: 3;
    .div1{
        display: flex;
        height: (44/@vw) ;
        align-items: center;
        background-color: #fff;
        justify-content: space-between;
        .img1{
            width: (66/@vw);
            height: (30/@vw);
        }
        .img2{
            width: (22/@vw);
            height: (22/@vw);
            margin-left: (100/@vw);
        }
        .bt1{
            width: (24/@vw);
            height: (24/@vw);
            font-size: (9/@vw);
            padding: 0;
            border-radius: (12/@vw);
            border: none;
            background-color: #e7e7e7;
            color: @colorr;
            font-weight: 900;
        }
        .bt2{
            width: (72/@vw);
            height: (24/@vw);
            font-size: (12/@vw);
            background-color: @colorr;
            border: none;
            color: #fff;
            border-radius: (5/@vw);
        }
    }
    .div2{
        width: 100%;
        overflow: hidden;
        position: relative;
        overflow-x: auto; /* 启用水平滚动 */
        white-space: nowrap; /* 防止li元素换行 */
        scrollbar-width: none; /* 设置滚动条宽度（可选） */
        ul{
            // display: flex;
            // width: 300%;
            list-style-type: none; /* 移除默认列表样式 */
           
            :hover{
                color: @colorr;
                border-bottom: solid 2px @colorr;
            }
            li{
                margin-right: (30/@vw);
                display: inline-block;
                line-height: (40/@vw);
               font-size: (14/@vw);
            }
        }
       
    }
    h6{
        position: absolute;
        right: 0;
        top: (56/@vw);
        background-color: #fff;
        width: (20/@vw);
        text-align: center;
        img{
            width: (20/@vw);
        }
    }
   
}

main{

    margin: (90/@vw) (13/@vw) 0 (13/@vw);
    width: (351/@vw);
    justify-content: space-between;
    display: flex;
    ul{
       
        li{
            width: (172/@vw);
            position: relative;
            margin-bottom: (10/@vw);
           
            img{
                width: 100%;
                border-radius: (2/@vw);
                margin-bottom: (5/@vw);
            }
            p{
                font-size: (12/@vw);
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden; 
                line-clamp: 2;
            }
            div{
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 0 (10/@vw);
                background-color: rgba(000, 000, 000, 0.4);
                color: #fff;
                position: absolute;
                left: 0;
                top: (70/@vw);
                img{
                    width: (16/@vw);
                }
                p{
                    line-height: 25px;
                }
            }
        }
    }
}

footer{
    width: (351/@vw);
    height: (37.5/@vw);
    background-color: @colorr;
    margin: 0 (13/@vw);
    position: fixed;
    bottom: (27/@vw);
    border-radius: (20/@vw);
    justify-content: center;
    align-items: center;
    display: flex;
    color: #fff;
    font-size: (14/@vw);
    img{
        width: (40/@vw);
        margin-right: (10/@vw);
    }
}